<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		/* 
		  06-获取服务器端响应数据的另一种方式
		*/
		// 创建一个Ajax对象
		var xhr = new XMLHttpRequest();
		// 下面打印Ajax的状态码
		// 已经创建了Ajax对象 ， 但是还没有对Ajax对象进行配置
		console.log(xhr.readyState); // 0

		//1）请求方式2）请求地址
		xhr.open('get', 'http://localhost:3001/readystate')
		// 已经对Ajax进行配置， 但是还没有发送请求
		console.log(xhr.readyState); // 1

		// 利用Ajax的事件监听Ajax状态码的值
		// onreadystatechange 当Ajax的状态码发生变化的时候触发该事件
		// 这儿发生了一点小的失误 就是 我把 onreadystatechange 写成了 readystatechange 害我找了好一会儿的错误! careful!!!
		xhr.onreadystatechange = function () {
			// 注意， 接下来状态码会分别变成
			// 2 请求已经发送了
			// 3 已经接收到服务器端的部分数据了
			// 4 服务器端的响应数据已经接近完成
			// 但是有一点需要注意 就是readystatechange事件应该放在 send的前面 【如果请求已经发送了， 你再去监听 是不是 就已经晚了啊！】
			console.log(xhr.readyState);
			// 对Ajax 状态码进行判断 如果状态码的值为4 就代表 数据已经接受完成了!
			if (xhr.readyState == 4) {
				console.log(xhr.responseText);
			}
		}
		xhr.send();
	</script>
</body>
</html>